<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }

</style>
<template>
    <div class="layout">
        <Sider  style= "position: fixed;width: 90px;min-width: 90px;max-width: 90px; height:100%;left: 0;">
            <Menu :active-name="activeMenu" theme="dark" width="auto" :open-names="['1']">
            	<MenuItem name="0" >
            		<el-dropdown>
				      <span class="el-dropdown-link">
				        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
				      </span>
				      <el-dropdown-menu slot="dropdown">
				        <el-dropdown-item @click.native="toUrl('/summarize/zhu')">返回概述<Icon type="ios-undo-outline" size="19"style="margin-left: 40px;"/></el-dropdown-item>
				        <el-dropdown-item divided>切换账户<Icon type="ios-repeat" size="19"style="margin-left: 40px;"/></el-dropdown-item>
				        <el-dropdown-item divided>邀请客户<Icon type="ios-contacts-outline" size="19"style="margin-left: 40px;"/></el-dropdown-item>
				        <el-dropdown-item divided>个人设置<Icon type="ios-build-outline" size="19"style="margin-left: 40px;"/></el-dropdown-item>
				        <el-dropdown-item divided @click.native='Logout'>退出登录<Icon type="ios-power-outline" size="19"style="margin-left: 40px;"/></el-dropdown-item>
				      </el-dropdown-menu>
				    </el-dropdown>
            	</MenuItem>
                
                <!-- <template v-for="(item,index) in activeList"  >
                    <MenuItem :name='index' :key="index"  @click.native="toUrl(item.path,index)">
                            <Icon :type="item.type"></Icon>
                            <span>{{item.name}}</span>
                    </MenuItem>
                </template> -->

                <MenuItem name="1" @click.native="toUrl('/summarize/zhu')">
                    <Icon type="ios-navigate"></Icon>
                    <span >概述</span>
                </MenuItem>
                <MenuItem name="2" @click.native="toUrl('/goods/library/libcontent')">
                    <Icon type="ios-search"></Icon>
                    <span >商品</span>
                </MenuItem>
                <MenuItem name="3" @click.native="toUrl('/TheOrder/orderSider')" >
                    <Icon type="ios-settings"></Icon>
                    <span >订单</span>
                </MenuItem>
                <MenuItem name="4" @click.native="toUrl('/customer/customerSider')" >
                    <Icon type="ios-navigate"></Icon>
                    <span >客户</span>
                </MenuItem>
                <MenuItem name="5" @click.native="toUrl('/data/dataGeneralsituation')">
                    <Icon type="ios-search"></Icon>
                    <span >数据</span>
                </MenuItem>
                <MenuItem name="6" @click.native="toUrl('/assets/assetsSider')">
                    <Icon type="ios-settings"></Icon>
                    <span >资产</span>
                </MenuItem>
                <div style="margin-top: 60px;">
                <MenuItem name="7" @click.native="toUrl('/OnlineStore/OnlineStoreSider')">
                    <Icon type="ios-search"></Icon>
                    <span >网店</span>
                </MenuItem>
                <MenuItem name="8" @click.native="toUrl('/tool/toolSider')">
                    <Icon type="ios-settings"></Icon>
                    <span >设置</span>
                </MenuItem>  
                </div>
                 
            </Menu>
        </Sider>
        
        <router-view></router-view> 
       
    </div>
</template>
<script>
    export default {
        data(){
        	return{
                activeMenu:'1',
            //     activeList:[
            //         {name:'概况',path:'/summarize/zhu',type:'ios-navigate'},
            //         {name:'商品',path:'/goods/library/libcontent',type:'ios-search'},
            //         {name:'订单',path:'/TheOrder/orderSider',type:'ios-navigate'},
            //         {name:'客户',path:'/customer/customerSider',type:'ios-navigate'},
            //         {name:'数据',path:'/data/dataSider',type:'ios-navigate'},
            //         {name:'资产',path:'/assets/assetsSider',type:'ios-navigate'},
            //         {name:'网店',path:'/OnlineStore/OnlineStoreSider',type:'ios-navigate'},
            //         {name:'设置',path:'/tool/toolSider',type:'ios-navigate'},
            //     ]
        	 }
        },
        computed:{
           
        },
        created(){
           
        },
        mounted(){
            
           this.menuList()
         
        },
        methods:{
        	Logout(){
                console.log('退出')
                sessionStorage.removeItem('token')
        		this.$router.push('/')
        	},
            toUrl(path,index){
              this.$router.push({path:path})
            },
            menuList(){  
             let path = this.$route.path  
             if(path.indexOf('/summarize') != -1){  
                this.activeMenu = '1'
                return this.activeMenu
              }
              if(path.indexOf('/goods') != -1){
                  this.activeMenu = '2'
                  return this.activeMenu
              }
              if(path.indexOf('/TheOrder') != -1){
                  this.activeMenu = '3'
                  return this.activeMenu
              }
              if(path.indexOf('/customer') != -1){
                  this.activeMenu = '4'
                  return this.activeMenu
              }
              if(path.indexOf('/data') != -1){
                  this.activeMenu = '5'
                  return this.activeMenu
              }
              if(path.indexOf('/assets') != -1){
                  this.activeMenu = '6'
                  return this.activeMenu
              }
              if(path.indexOf('/OnlineStore') != -1){
                  this.activeMenu = '7'
                  return this.activeMenu
              }
              if(path.indexOf('/tool') != -1){
                  this.activeMenu = '8'
                  return this.activeMenu
              }
         }

        },
        
    }
   
</script>









<!-- <MenuItem name="1" @click.native="toUrl('/summarize/zhu')">
                    <Icon type="ios-navigate"></Icon>
                    <span >概述</span>
                </MenuItem>
                <MenuItem name="2" @click.native="toUrl('/goods/library/libcontent')">
                    <Icon type="ios-search"></Icon>
                    <span >商品</span>
                </MenuItem>
                <MenuItem name="3" @click.native="toUrl('/TheOrder/orderSider')" >
                    <Icon type="ios-settings"></Icon>
                    <span >订单</span>
                </MenuItem>
                <MenuItem name="4" @click.native="toUrl('/customer/customerSider')" >
                    <Icon type="ios-navigate"></Icon>
                    <span >客户</span>
                </MenuItem>
                <MenuItem name="5" @click.native="toUrl('/data/dataSider')">
                    <Icon type="ios-search"></Icon>
                    <span >数据</span>
                </MenuItem>
                <MenuItem name="6" @click.native="toUrl('/assets/assetsSider')">
                    <Icon type="ios-settings"></Icon>
                    <span >资产</span>
                </MenuItem>
                <div style="margin-top: 60px;">
                <MenuItem name="7" @click.native="toUrl('/OnlineStore/OnlineStoreSider')">
                    <Icon type="ios-search"></Icon>
                    <span >网店</span>
                </MenuItem>
                <MenuItem name="8" @click.native="toUrl('/tool/toolSider')">
                    <Icon type="ios-settings"></Icon>
                    <span >设置</span>
                </MenuItem>  
                </div>-->